<template>
	<view>
		<view class="topbar-main">
			<my-topbar :textColor="textColor" :bgColor="bgColor" :topbarList="topbarList" :activeIndex="activeIndex"
				@changeActiveIndex="changeActive" :topbarViewWidth="topbarViewWidth" :bottomViewWidth="bottomViewWidth"
				:topbarWidth="topbarWidth">
			</my-topbar>
		</view>
		<view class="topbar-zw"></view>
	</view>
</template>

<script>
	//导入公共组件
	import myTopbar from '@/components/common/my-topbar-animation/my-topbar-animation.vue'

	export default {
		props: ['activeIndex'],
		components: {
			myTopbar
		},
		data() {
			return {
				bgColor: '#fff',
				topbarViewWidth: '200rpx',
				bottomViewWidth: '100rpx',
				topbarWidth: '400rpx',
				textColor: 'red',
				topbarList: [{
					id: 1,
					text: '我发送的',
					type: '1'
				}, {
					id: 2,
					text: '我收到的',
					type: '2'
				}],


			}
		},
		methods: {
			changeActive(id, item) {
				//console.log(id)
				this.$emit('changeActive', id, item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	

	/* #ifdef APP-PLUS*/
	.topbar-main {
		position: fixed;
		top: 0;
	}
	
	.topbar-zw {
		height: 100rpx;
	}

	/*#endif */


	/*#ifdef H5*/
	.topbar-main {
		position: fixed;
		top: calc(44px + var(--status-bar-height));
	}
	
	.topbar-zw {
		height: 100rpx;
		padding-top: var(--status-bar-height);
	}

	/*#endif*/
</style>